<template>
	<div class="set-act-box">
		<el-dialog
		   title="编辑样式"
		   :visible.sync="dialogVisible"
		   width="30%"
		   :before-close="handleClose">
		   
			<div>
				  <span class="m-s-txt-lb">常见文字:</span>
				  <el-radio v-model="radio" label="1">默认</el-radio>
				  <el-radio v-model="radio" label="2">自定义</el-radio>
			</div>
			  
			<div v-if="radio == '2'">
				<div class="txt-size-box">
					<span class="t-s-lb">文字大小</span>
					<el-slider v-model="value1" :max="32" :min="12"></el-slider>
					<span class="m-s-txt-lb">12px - 32px</span>
				</div>
				<div class="s-c-box">
					<span class="txt-lb">文字颜色</span>
					<el-radio v-model="radio1" label="1">关闭</el-radio>
					<el-radio v-model="radio1" label="2">自定义</el-radio>
					<div class="block" v-if="radio1 == '2'">
						<el-color-picker v-model="color1" size="small"></el-color-picker>
					</div>
				</div>
				<div class="s-c-box">
					<span class="txt-lb">描边颜色</span>
					<el-radio v-model="radio2" label="1">关闭</el-radio>
					<el-radio v-model="radio2" label="2">自定义</el-radio>
					<div class="block" v-if="radio2 == '2'">
						<el-color-picker v-model="color2" size="small"></el-color-picker>
					</div>
				</div>
			</div>
			
			<el-divider></el-divider>
			
			<div>
				  <span class="m-s-txt-lb">参与人数:</span>
				  <el-radio v-model="radio3" label="1">默认</el-radio>
				  <el-radio v-model="radio3"  label="2">自定义</el-radio>
			</div>
			<div v-if="radio3 == '2'">
				<div class="txt-size-box">
					<span class="t-s-lb">文字大小</span>
					<el-slider v-model="value2"  :max="32" :min="12"></el-slider>
					<span class="m-s-txt-lb">12px-32px</span>
				</div>
				<div class="s-c-box">
					<span class="txt-lb">文字颜色</span>
					<el-radio v-model="radio4" label="1">关闭</el-radio>
					<el-radio v-model="radio4" label="2">自定义</el-radio>
					<div class="block" v-if="radio4 == '2'">
						<el-color-picker v-model="color4" size="small"></el-color-picker>
					</div>
				</div>
				<div class="s-c-box">
					<span class="txt-lb">描边颜色</span>
					<el-radio v-model="radio5" label="1">关闭</el-radio>
					<el-radio v-model="radio5" label="2">自定义</el-radio>
					<div class="block" v-if="radio5 == '2'">
						<el-color-picker v-model="color5" size="small"></el-color-picker>
					</div>
				</div>
			</div>
		</el-dialog>
	</div>
</template>

<script>
	export default
	{
		data()
		{
			return{
				value1:12,
				value2:12,
				dialogVisible:false,
				radio : "1",
				radio1 : '1',
				radio2 : '1',
				radio3 : "1",
				radio4 : "1",
				radio5 : "1",
				
				color1 : "",
				color2 : "",
				color4 : "",
				color5 : "",
				defaultObj:
				{
					txt:{ //文本样式
						color:"#F04848",//文字颜色
						size:12,//字体大小
						borderCol:"#FFFFFF",
					},
					num:
					{
						color:"#3388FF",//文字颜色
						size:12,//字体大小
						borderCol:"#FFFFFF",
					}
				}
			}
		},
		
		methods:
		{
			showWin(data)
			{
				this.dialogVisible = true;
				this.value1 = Number(data.txt.size);
				this.color1 = data.txt.color;
				this.color2 = data.txt.borderCol;
				console.log("data=====:",data);
				if(this.value1 != this.defaultObj.txt.size 
				|| this.color1 != this.defaultObj.txt.color 
				|| this.color2 != this.defaultObj.txt.borderCol)
				{
					this.radio = "2";
					if(this.color1 != this.defaultObj.txt.color) 
					{
						this.radio1 = "2";
					}
					else
					{
						this.radio1 = "1";
					}
					if(this.color2 != this.defaultObj.txt.borderCol)
					{
						this.radio2 = "2";
					}
					else
					{
						this.radio2 = "1";
					}
				}
				else
				{
					this.radio = "1";
				}
				
				this.value2 = Number(data.num.size);
				this.color4 = data.num.color;
				this.color5 = data.num.borderCol;
				if(this.value2 != this.defaultObj.num.size
				|| this.color4 != this.defaultObj.num.color 
				|| this.color5 != this.defaultObj.num.borderCol)
				{
					this.radio3 = "2";
					if(this.color4 != this.defaultObj.num.color)
					{
						this.radio4 = "2";
					}
					else
					{
						this.radio4 = "1";
					}
					if(this.color5 != this.defaultObj.num.borderCol)
					{
						this.radio5 = "2";
					}
					else
					{
						this.radio5 = "1";
					}
				}
				else
				{
					this.radio3 = "1";
				}
			},
			
			handleClose()
			{
				this.dialogVisible = false;
				let data = {};
				// if (this.radio == 1) {
				// 	data.txt = this.defaultObj.txt;
				// } else {
				// 	data.txt = {size:this.value1,color:this.color1,borderCol:this.color2};
				// }

				// if (this.radio3 == 1) {
				// 	data.num = this.defaultObj.txt;

				// } else  {
				// 	data.num = {size:this.value2,color:this.color4,borderCol:this.color5};
				// }
				data.txt = this.radio == 1?data.txt = this.defaultObj.txt:data.txt = {size:this.value1,color:this.color1,borderCol:this.color2};
				data.num = this.radio3 == 1?data.num = this.defaultObj.num:data.num = {size:this.value2,color:this.color4,borderCol:this.color5};
				this.$emit('editParttakSty',data);
			},
		}
	}
</script>

<style lang="scss" scoped>
	
	.set-act-box
	{
		::v-deep.el-dialog
		{
			margin-top: 35vh !important;
		}
	}
	
	.m-s-txt-lb
	{
		padding-right: 10px;
	}
	
	.txt-lb
	{
		padding-right: 14px;
	}
	
	.o-u-box
	{
		display:flex;
		align-items: center;
		padding-top: 20px;
		.f-n-txt-lb
		{
			padding-right: 10px;
		}
		
		
	}
	.txt-size-box
	{
		display:flex;
		align-items: center;
		.t-s-lb
		{
			padding-right: 20px;
		}
		.m-s-txt-lb
		{
			padding-left: 20px;
		}
	}
	
	.s-c-box
	{
		display: flex;
		align-items: center;
	}
	
	::v-deep.el-slider__runway
	{
		width: 200px !important;
	}
</style>